<template>
	<view id="index">
		<!-- 背景半椭圆 -->
		<view id="background-top" />
		
		<!-- 头部搜索框 -->
		<view class="header">
			<uni-row>
					<uni-col :span="20">
						<uni-search-bar class="searchBar" placeholder="请输入搜索内容" :radius="200" @confirm="toSearch" v-model="searchValue"
							clearButton="auto" cancelButton="none"/>
					
					</uni-col>
					<uni-col :span="4">
						<view class="consult">
							<uni-icons type="phone" size="16px" color="white"></uni-icons>
							<text class="consult_text">咨询</text>
						</view>
					</uni-col>
				</uni-row>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper">
			<uni-swiper-dot class="swiper-dot" :info="swiperList" :current="swiperIndex" mode="round"
						 field="content">
				<swiper class="swiper-box"
						@change="swpierChangeIndex"
						autoplay circular
						previous-margin="30px"
						next-margin="30px"
						>
					<swiper-item v-for="(item, index) in swiperList" :key="item">
						<image :class="{'active':index==swiperIndex,'beside':index!=swiperIndex}" :src="'../../static/img/swiper/'+item" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		
		<!-- 功能板块 -->
		<view class="service">
			<!-- 功能-item -->
			<navigator :url="item.path" hover-class="none"
			v-for="(item,index) in serviceList" :key="item.name">
				<view 
				class="service-item">
					<image :src="'../../static/img/service/'+item.src" mode="scaleToFill" />
					<view class="service-name">
						{{item.name}}
					</view>
				</view>	
			</navigator>
			
		</view>
		
		
		<!-- 资讯 -->
		<view class="infomation" :style="{top: (infomation.top?infomation.top:320)+'px'}">
			<view class="title">
				农话资讯
			</view>
			<!-- 资讯-item -->
			<view class="infomation-card"
			 v-for="(item,index) in infomation.list" :key="item.title"
			 @click="goWebView(item.url)">
				<view class="card-img">
					<image :src="'../../static/img/infomation/'+item.src" mode="aspectFill"></image>
				</view>
				<view class="card-title">
					<text class="main-title">
						{{item.title}}
					</text>
					<text class="sub-title">{{item.subTitle}}</text>
				</view>
				
			</view>
			
			<view class="reachBottom">
				<uni-load-more iconType="circle" :content-text="{contentdown:'加载更多'}" :status="infomationStatus" />
			</view>
		</view>
		
		
	</view>
	
</template>

<script>

	export default {
		data() {
			return{
				// 搜索框
				searchValue:"",
				
				// 轮播图
				swiperIndex:0,
				swiperList:["swiper0.jpg","swiper1.jpg","swiper2.jpg","swiper3.jpg","swiper4.jpg","swiper5.jpg"],
				
				// 服务功能板块
				serviceList:[
					{name:"技术服务",src:"0.png",path:"/pages/index/technology/technology"},
					{name:"营销服务",src:"1.jpg",path:"/pages/index/market/market"},
					{name:"公益活动",src:"2.jpg",path:"/pages/index/public/public"},
					{name:"商业理念",src:"3.png",path:"/pages/index/business/business"},	
					{name:"地方特色",src:"4.jpg",path:"/pages/index/localColor/localColor"}
				],
					
				// 资讯
				infomationNumber: 5,
				infomationStatus: "more",
				infomation:{
					top: null,
					list:[
						{title:"习近平：坚持把解决好“三农”问题作为全党工作重中之重 举全党全社会之力推动乡村振兴",subTitle:"CAU国家农业市场研究中心",src:"dd656a1bbf52772c6e20a509592b5a2.jpg",url:"https://mp.weixin.qq.com/s/Gko5MRnRdv2u7DdzYISqqQ"},
						{title:"我与他好像有一面之缘，在课本上，在饭桌上，在稻田里...",subTitle:"湖南农业大学",src:"97fb1a5c4b0153d6a61fd3cb655d316.jpg"},
						{title:"芭乐，北方人的水果盲区",subTitle:"吃货研究所",src:"0a4c104a7d61ebebaeab3cb0c732838.jpg"}
						]
				}
			}
		},
		
		methods: {
			// 搜索框
			toSearch(){
				
			},
			// 轮播图
			swpierChangeIndex(e){
				this.swiperIndex=e.detail.current;
			},
			goWebView(url){
				uni.navigateTo({
				    url:`../webView/webView?url=${url}`
				});
			}
		},
		
		onPageScroll({scrollTop}) {
			this.infomation.top=320-(scrollTop*0.5);
		},
		
		onReachBottom(){
			// 底部加载钩子函数
			
			if(this.infomationStatus!='noMore'){
				this.infomationStatus="loading";
				setTimeout(()=>{
					this.infomationStatus="noMore";
				},1000)
			}
		},
		components:{
			
		}
	}
</script>

<style lang="scss">
	#background-top{
		margin: 0!important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150px;
		background-color: #ec3525;
		border-radius: 0 0 30% 30%;
		z-index: -10;
	}
	
	// 当前组件
	#index {
		position: relative;
		font-size: 14px;
		line-height: 24px;
		>view{
			margin: 0 5px;
		}
		
		.header{
			// 搜索框边框
			.uni-searchbar{
				padding: 0;
			}
			// 搜索框box
			.uni-searchbar__box{
				height: 30px;
			}
			
			// 咨询按钮
			.consult {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				font-weight: bold;
			}
		}
		
		// 轮播图
		.swiper{
			// height: 200px;
			margin: 0;
			margin-top: 20px;
			border-radius: 10px;
			overflow: hidden;
			
			// 图片样式
			image{
				width: 100%;
				height: 150px;
				border-radius: 10px;
				transition: all 0.3s;
				
			}
			image.active{
				transform: scale(1);
			}
			image.beside{
				transform: scale(0.9);
			}
			
			// 轮播图点
			.uni-swiper__dots-item{
				transition: all 0.5s;
				background-color: rgba($color: #fff, $alpha: 0.3)!important;
			}
		}
	
		// 服务功能板块
		.service{
			margin-top: 10px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100px;
			border: 1px solid #DCDCDC;
			border-radius: 5px;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
			background-color: #fff;
			
			// 服务功能单例
			.service-item{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				
				image{
					width: 40px;
					height: 40px;
				}
				
				.service-name{
					font-size: 13px;
				}
			}
		}
	
		// 资讯
		.infomation{
			position: absolute;
			// top: 320px;
			margin: 0;
			// margin-top: 10px;
			padding: 5px 5px;
			width: 100%;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			border: 1px solid rgba(0, 0, 0, 0.1);
			box-shadow: 0px -7px 3px -7px rgba(0, 0, 0, 0.08);
			transition: top 0.1s;
			
			>.title{
				z-index: 10;
				position: sticky;
				top: 0;
				font-size: 16px;
				text-align: center;
				color: #909399;
				padding: 5px 0;
				font-weight: bold;
				background-color: #fff;
				width: 100%;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				box-shadow: 0px 7px 3px -7px rgba(0, 0, 0, 0.08);
			}
			
			.infomation-card:nth-child(n+2){
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			}
			.infomation-card{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
				background-color: #fff;
				
				
				margin-bottom: 5px;
				
				// 图片
				.card-img{
					width: 80px;
					height: 80px;
					border-radius: 5px;
					overflow: hidden;
					image{
						width: 80px;
						height: 80px;
					}
					margin-right: 10px;
				}
				
				// 内容栏
				.card-title{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 80px;
					width: calc(100% - 90px);
					
					// 主标题
					.main-title{
						width: 100%;
						font-size: 15px;
						color: #3a3a3a;
						// 两行显示
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp:2;
						-webkit-box-orient:vertical;
					}
					// 副标题
					.sub-title{
						font-size: 12px;
						margin-top: 5px;
						color: #909399;
						// 两行显示
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp:2;
						-webkit-box-orient:vertical;
					}
				}
			}
			
		}
		
	}
	

</style>
